<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/center' }">首页</el-breadcrumb-item>
            <!--面包屑列表-->
            <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">
                {{item.name}}
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
    </div>
</template>

<script>
export default {
    name: "breadcrumb",
    data(){
        return{
            levelList:[]
        }
    },
    watch: {
        $route () {
            this.getBreadcrumb();
        }
    },
    created(){
        this.getBreadcrumb()
    },
    methods:{
        // 面包屑数据处理
        getBreadcrumb () {
            let matched = this.$route.matched.filter(item => item.name)  //获取路由信息，并过滤保留路由名称信息存入数组
            this.levelList = matched

        },
    }
}
</script>

<style scoped>

</style>
